 <!--开发商返还款查看or审核-->
<template>
  <div class="listDetails">
    <el-breadcrumb separator="/" class="bread-title">
      <el-breadcrumb-item :to="{ path: './developerPayment' }">开发商返还款列表</el-breadcrumb-item>
      <el-breadcrumb-item>返还款查看</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="title">基本信息</div>
    <span class="tables">
      <table>
        <tr>
          <td>项目名称：</td>
          <td>{{objData.projectName}}</td>
          <td>返还款剩余金额（元）：</td>
          <td>{{formatMoney(objData.notReturnAmount)}}</td>
        </tr>
        <tr>
          <td>楼盘名称：</td>
          <td>{{objData.devName}}</td>
          <td>是否有合同：</td>
          <td>{{contractHave}}</td>
        </tr>
        <tr>
          <td>返还款累计金额（元）：</td>
          <td>{{formatMoney(objData.totalAmount)}}</td>
          <td>付款用途：</td>
          <td>{{payUse}}</td>
        </tr>
        <tr>
          <td>返还款已付金额（元）：</td>
          <td>{{formatMoney(objData.returnAmount)}}</td>
          <td>申请人：</td>
          <td>{{objData.creatorName}}</td>
        </tr>
        <tr>
          <td>返还款冻结金额（元）：</td>
          <td>{{formatMoney(objData.frozenAmount)}}</td>
          <td></td>
          <td></td>
        </tr>
      </table>
      <div v-if="contractHaves">
        <div class="title">合同信息</div>
        <table>
          <tr>
            <td>合同名称：</td>
            <td>
              <el-button type="text" size="small" @click="toContract()">{{contract.contractName}}</el-button>
            </td>
            <td>合同编号：</td>
            <td>{{contract.contractCode}}</td>
          </tr>
          <tr>
            <td>合同含税总金额(元)：</td>
            <td>{{formatMoney(contract.contractAmount)}}</td>
            <td>累计已付款金额(元)：</td>
            <td>{{formatMoney(contract.paidAmountTotal)}}</td>
          </tr>
          <tr>
            <td>未付款含税金额（元）：</td>
            <td>{{formatMoney(contract.notPayAmount)}}</td>
            <td>合同性质：</td>
            <td>{{contract.contractNature}}</td>
          </tr>
        </table>
      </div>
      <div class="title">付款信息</div>
      <table>
        <tr>
          <td>本次付款含税金额(元)：</td>
          <td>{{formatMoney(objData.payAmount)}}</td>
          <td>本次付款不含税金额(元)：</td>
          <td>{{formatMoney(objData.payAmountNoTax)}}</td>
        </tr>
        <tr>
          <td>税率（%）：</td>
          <td>{{(objData.taxRate * 100)}}</td>
          <td>税金：</td>
          <td>{{formatMoney(objData.payTax)}}</td>
        </tr>
        <tr>
          <td>实际付款金额：</td>
          <td>{{formatMoney(objData.realAmount)}}</td>
          <td>结算支付方式：</td>
          <td>{{paymentType}}</td>
        </tr>
        <tr>
          <td>是否有发票：</td>
          <td>{{billHava}}</td>
          <td>发票类型：</td>
          <td>{{billType}}</td>
        </tr>
        <tr>
          <td>计税方式：</td>
          <td>{{objData.taxType == 1 ? '一般' : '简易'}}</td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>付款摘要：</td>
          <td :colspan="3">{{objData.remark}}</td>
        </tr>
      </table>
      <div class="title">收款方账号</div>
      <table>
        <tr>
          <td>收款方名称：</td>
          <td>{{objData.receiveName}}</td>
          <td>收款方类型：</td>
          <td>{{objData.receiveType == 1 ? '公司' : '个人'}}</td>
        </tr>
        <tr>
          <td>收款方账号：</td>
          <td>{{objData.receiveAccount}}</td>
          <td>开户行（支行）：</td>
          <td>{{objData.receiveBankBranch}}</td>
        </tr>
        <tr>
          <td>联行号：</td>
          <td>{{objData.receiveLinkNumber}}</td>
          <td>开卡省-市：</td>
          <td>{{objData.receiveCardProvince}}- {{objData.receiveCardCity}}</td>
        </tr>
        <tr>
          <td>开户编码：</td>
          <td>{{objData.receiveAccountCode}}</td>
          <td></td>
          <td></td>
        </tr>
      </table>
      <div class="title">付款方账号</div>
      <table>
        <tr>
          <td>付款方名称：</td>
          <td>{{objData.paymentName}}</td>
          <td>纳税人识别号：</td>
          <td>{{objData.paymentTaxNumber}}</td>
        </tr>
        <tr>
          <td>付款方账号：</td>
          <td>{{objData.paymentAccount}}</td>
          <td>开户行（支行）：</td>
          <td>{{objData.paymentBankBranch}}</td>
        </tr>
      </table>
    </span>
    <div class="title">附件</div>
    <div>
      <el-table :span-method="objectSpanMethod" size="small" :data="url" border>
        <el-table-column align="center" prop="name" label="文件名">
          <template slot-scope="scope">
            <el-button
              style="border-buttom:1px solid red"
              type="text"
              size="small"
              @click="downloads(scope.row.url)"
            >{{scope.row.name}}</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="createName" label="创建人"></el-table-column>
        <el-table-column align="center" prop="createTime" :formatter="createTime" label="上传时间"></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="downAll(scope)">
              一键下载
              <i class="el-icon-download el-icon--right"></i>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="margin-bottom:100px">
      <div class="title">操作记录</div>
      <el-table :data="recordsList" border>
        <el-table-column align="center" :formatter="operation" label="操作"></el-table-column>
        <el-table-column align="center" prop="content" label="审核意见"></el-table-column>
        <el-table-column align="center" prop="userName" label="操作人"></el-table-column>
        <el-table-column align="center" :formatter="createTime" label="操作时间"></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import api from "@/api/apiPath";
import utils from "@/common/utils";
export default {
  name: "listDetails",
  data() {
    return {
      objData: {},
      spanArr: [],
      position: 0,
      contract: {}, // 合同信息
      recordsList: [],
      id: "",
      url: [],
      contractHaves: true
    };
  },
  computed: {
    contractHave() {
      if (this.objData.contractHave == 0) {
        return "无合同付款";
      } else {
        return "有合同付款";
      }
    },
    payUse() {
      if (this.objData.payUse == 1) {
        return "返还开发商";
      } else if (this.objData.payUse == 2) {
        return "返还个人（员工）";
      } else if (this.objData.payUse == 3) {
        return "通过第三方返还个人";
      } else if (this.objData.payUse == 4) {
        return "购买购物卡（非经纪人奖励）";
      } else if (this.objData.payUse == 5) {
        return "推广营销";
      } else {
        return "其他";
      }
    },
    payStatus() {
      if (this.objData.payStatus == 0) {
        return "未付款";
      } else {
        return "已付款";
      }
    },
    billHava() {
      if (this.objData.billHava === 0) {
        return "否";
      } else {
        return "是";
      }
    },
    billType() {
      if (this.objData.billType === 1) {
        return "增值税专用发票";
      } else if(this.objData.billType === 2){
        return "普通发票";
      }else {
        return ''
      }
    },
    paymentType() {
      if (this.objData.paymentType == 1) {
        return "通过银企直连付款（对公）";
      } else if (this.objData.paymentType == 2) {
        return "通过银企直连付款（对私）";
      } else {
        return "转账";
      }
    }
  },
  created() {
    this.id = this.$route.query.id;
    this.list(this.$route.query.id);
    this.records(this.$route.query.id);
  },
  methods: {
    // 一键下载
    downAll() {
      window.open(this.$axios.baseURL + '/commission/developer/fileDownload/' + this.id)
    },
    // 单个下载
    downloads(url) {
      window.open(url);
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // columnIndex 第几列
      if (columnIndex === 3) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row, // 合并行
          colspan: _col // 合并列
        };
      }
    },
    createTime(row) {
      return utils.getTimeString(row.createTime);
    },
    toContract() {
      this.$router.push({
        name: "contractlist",
        params: { name: this.contract.contractName }
      });
    },
    download(url) {
      window.open(url);
    },
    rowspan() {
      this.url.forEach((item, index) => {
        if (index === 0) {
          this.spanArr.push(1);
          this.position = 0;
        } else {
          if (this.url[index].type === this.url[index - 1].type) {
            this.spanArr[this.position] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.position = index;
          }
        }
      });
    },
    list(id) {
      this.$axios
        .post("/commission/developer/getById", { id: id })
        .then(res => {
          this.objData = res;
          this.url = res.url ? JSON.parse(res.url) : [];
          this.contract = res.contract;
          if (res.contractHave === 0) {
            this.contractHaves = false;
          }
          this.rowspan();
        });
    },
    formatMoney(money) {
      return utils.formatMoney(money)
    },
    // 操作记录
    records(id) {
      this.$axios
        .post("/commission/developer/remark/getList", { id: id })
        .then(res => {
          this.recordsList = res;
        });
    },
    operation(row) {
      if (row.checkStatus === 0) {
        return "未审核";
      } else if (row.checkStatus === 1) {
        return "审核成功";
      } else if (row.checkStatus === 2) {
        return "审核拒绝";
      }
    }
  }
};
</script>
<style lang="stylus">
.listDetails {
  font-size: 14px;

  .title {
    line-height: 40px;
    margin-top: 20px;
    font-size: 14px;
    font-weight: bold;
  }

  .tables table {
    border-collapse: collapse;
    width: 100%;
    margin: 0 auto;
  }

  .tables table tr td {
    border: 1px solid #ccc;
    line-height: 30px;
    box-sizing: border-box;
    padding: 0 3px;
    text-align: center;
    width: 25%;
  }

  .tables table tr td:nth-child(odd) {
    text-align: right;
  }

  .opin {
    width: 80%;
  }

  .forms {
    width: 100%;
    text-align: center;
    margin: 40px auto;
  }

  .el-icon-download {
    font-size: 18px;
    margin-left: 3px;
    cursor: pointer;
  }

  .opin {
    width: 80%;
    position: relative;
  }

  .noteNum {
    position: relative;
    bottom: 3px;
    right: 60px;
    color: #666;
  }

  .forms {
    width: 100%;
    text-align: center;
    margin: 40px auto;
  }

  .el-icon-download {
    font-size: 18px;
    margin-left: 3px;
    cursor: pointer;
  }
}
</style>

